<template>
	<view class="gx">
		<!-- 更新弹框 -->
		<u-popup :mask-close-able='false' v-model="show" mode="center" border-radius="20" width="60%">
			<view class="nppops shtks">
				<view class="contr">
					<view class="li">
						<image src="../../static/logo.png"></image>
						<view class="title">
							<!-- Diamonds -->
						</view>
						<view class="title">
							版本:{{versionnew}}
						</view>
						<view class="title">
							{{valnum}}% 更新中 <text>
								<u-loading size='28' mode="flower"></u-loading>
							</text>
						</view>
						<u-line-progress height='18' :show-percent='false' :striped="true" active-color="#466DF8"
							:percent="valnum"></u-line-progress>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 更新 -->
		<u-popup :mask-close-able='false' v-model="show3" mode="center" border-radius="20" width="80%">
			<view class="nppop shtk">
				<view class="contr">
					<view class="li">
						<view class="title ti">
							软件更新提示!
						</view>
					</view>
					<view class="li">
						<view class="title">
							有新版本啦 {{versionnew}},是否更新到新版本!
						</view>
					</view>
				</view>
				<view class="btngrs">
					<button @tap="cancel">取消</button>
					<button @click.once="upd" hover-class="active">更新</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		showToast
	} from '../../common/js/sysfun.js';
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				valnum: 0,
				versionnew: 0,
				updoff: false,
				show: false,
				show3: false,
			}
		},
		created() {
			// #ifdef APP-PLUS
			this.upt()
			// #endif
		},
		computed: {
			...mapGetters([
				'getLangType',
				'getRequestUrl'
			]),
			i18n() {
				return this.$t('message');
			}
		},
		methods: {
			upd() {
				this.show3 = false
				this.show = true
				this.updoff = true
				this.upt()
				uni.showLoading({
					title: '请稍等...'
				})
			},
			cancel() {
				this.show3 = false
				// plus.runtime.quit(); //强制退出
			},
			upt() {
				var server = this.getRequestUrl + "/api/index/app_info"; //检查更新地
				var req = { //升级检测数据  
					"appid": plus.runtime.appid,
					"version": plus.runtime.version
				};
				let _this = this;
				plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
						const {
							name,
							version
						} = widgetInfo
						uni.request({
								url: server,
								data: '',
								success: (res) => {
									if (res.data.code == 1) {
										//enforce  1更新，0不更新
										if (res.data.data.enforce == 1) {
											if (uni.getSystemInfoSync().platform == 'ios') {
												//判断是否ios更新
												if (req.version == res.data.data.oldversion) {
													// ios版本号相同不提示更新
												} else {
													// ios版本号不同提示更新
												}
											} else if (uni.getSystemInfoSync().platform === 'android') {
												//判断是否安卓更新
												_this.versionnew = res.data.data.oldversion
												if (req.version == res.data.data.oldversion) {} else {
													if (!!res.data.data.downloadurl_apple) {
														uni.downloadFile({
															url: res.data.data.downloadurl_apple,
															success: (res) => {
																if (res.statusCode == 200) {
																	plus.runtime.install(res
																		.tempFilePath, {
																			force: false
																		},
																		function() {
																			plus.runtime
																				.restart()
																		},
																		function() {}
																	)
																}
															}
														})
													}
												}
											}
										}
									}
								}
						})
				})
			}
		}
</script>

<style lang="scss" scoped>
	.gx {
		.shtks {
			padding: 30rpx 20rpx;
			background: #fff;

			.shtitle {
				padding-top: 24rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #272727;
			}

			.btngrs {
				margin: 64rpx 0 0;
				display: flex;
				justify-content: space-between;

				button {
					flex: 1;
					margin: 0;
					padding: 0;
					width: 0;
					height: 78rpx;
					line-height: 78rpx;
					font-size: 30rpx;
				}

				button:first-child {
					background: #fff;
					border: 1rpx solid #466DF8;
					color: #272727;
				}

				.active {
					background-color: #120d26;
				}

				button:last-child {
					margin-left: 15rpx;
					color: #fff;
					background: #466DF8;
					border: 1rpx solid #466DF8;
				}
			}
		}

		.nppops {
			padding: 30rpx;
			box-shadow: 0px 4px 20px 0px #333;

			.contr {
				color: #272727;
				text-align: center;

				.li {
					position: relative;
					padding-bottom: 15rpx;

					image {
						width: 85rpx;
						height: 85rpx;
					}

					.ti {
						font-size: 36rpx;
					}

					.title {
						padding: 10rpx 0;

						text {
							padding-left: 15rpx;
						}
					}

					input {
						margin-top: 20rpx;
						background-color: #131e30;
						height: 80rpx;
						border-radius: 15rpx;
						color: #272727;
						padding-left: 15rpx;
						font-size: 28rpx;
					}

					.rig {
						position: absolute;
						top: 105rpx;
						right: 15rpx;
					}
				}
			}
		}

		.shtk {
			padding: 30rpx 20rpx;
			background: #fff;

			.shtitle {
				padding-top: 24rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #272727;
			}

			.btngrs {
				margin: 64rpx 0 0;
				display: flex;
				justify-content: space-between;

				button {
					flex: 1;
					margin: 0;
					padding: 0;
					width: 0;
					height: 78rpx;
					line-height: 78rpx;
					font-size: 30rpx;
					border-radius: 999rpx;
				}

				button:first-child {
					background: #fff;
					border: 1rpx solid #466DF8;
					color: #272727;
					box-shadow: 0px 0px 20px 0px #466DF8;
				}

				.active {
					background-color: #eee;
				}

				button:last-child {
					margin-left: 15rpx;
					color: #fff;
					background: #466DF8;
					// border: 1rpx solid #2484ff;
					box-shadow: 0px 0px 20px 0px #466DF8;
				}
			}
		}

		.nppop {
			padding: 30rpx 30rpx 60rpx 30rpx;
			box-shadow: 0px 4px 20px 0px #333;

			.contr {
				color: #272727;
				text-align: center;

				.li {
					position: relative;
					padding-bottom: 15rpx;

					image {
						width: 85rpx;
						height: 85rpx;
					}

					.ti {
						font-size: 36rpx;
					}

					.title {
						padding: 10rpx 0;

						text {
							padding-left: 15rpx;
						}
					}

					input {
						margin-top: 20rpx;
						background-color: #fff;
						height: 80rpx;
						border-radius: 15rpx;
						color: #272727;
						padding-left: 15rpx;
						font-size: 28rpx;
					}

					.rig {
						position: absolute;
						top: 105rpx;
						right: 15rpx;
					}
				}
			}
		}

		/deep/.u-drawer__scroll-view {
			background-color: #fff;
		}
	}
</style>
